<template>
  <el-container class="h-100" v-loading="loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100 d-flex justify-content-between align-items-center bg-white" style="line-height: 80px;">
        <h5 class="d-inline">资源保护区监管</h5>
        <div>
          <el-select v-model="type" placeholder="请选择" @change="getDatas">
            <el-option label="人员设备监管" value="1"></el-option>
            <el-option label="进度统计监管" value="2"></el-option>
            <el-option label="多级协同监管" value="3"></el-option>
          </el-select>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="datas" v-if="type === '1'">
        <el-table-column fixed label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id_card }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备型号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.equipment_model }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备序列号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deviceId }}</span>
          </template>
        </el-table-column>
      </el-table>
        <!-- type === 2 -->
      <el-table :data="datas" v-if="type === '2'">
        <el-table-column fixed label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地市" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.city_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区县" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.area_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="县级全部任务" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaQB }}</span>
          </template>
        </el-table-column>
        <el-table-column label="县级已举证任务" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaYJZ }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已通过任务" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaYTG }}</span>
          </template>
        </el-table-column>
        <el-table-column label="不通过任务" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaBTG }}</span>
          </template>
        </el-table-column>
      </el-table>
        <!-- type === 3 -->
      <el-table :data="datas" v-if="type === '3'">
        <el-table-column fixed label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地市" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.city_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区县" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.area_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="待初审" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaDCS }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初审不通过" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaBTG }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初审通过" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.areaTG }}</span>
          </template>
        </el-table-column>
        <el-table-column label="复审通过" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.cityTG }}</span>
          </template>
        </el-table-column>
        <el-table-column label="复审不通过" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.cityBTG }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";

export default {
  title: "资源保护区监管",
  data() {
    return {
      loading: false,
      datas: [],
      type: '1',
    }
  },
  mounted() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      this.loading = true
      let url = 'json/rysb/zybhqjg.json'
      if (this.type === '2') {
        url = "json/jdjg/zybhqjg.json";
      } else if (this.type === '3') {
        url = "json/djxt/zybhqjg.json";
      }
      axios.get(url).then(res => {
        this.datas = res.data || []
      })
      .catch(error => {
        this.$catchError(error);
      })
      .finally(() => {
        this.loading = false;
      });
    }
  }
}
</script>
<style lang="scss">
</style>